<template>
  <div>
    <el-dialog title="物流方案" :visible.sync="isEditOrderSku" width="80%" @close="closeOnlineLogistics">
      <div v-if="isSendOutGoods" class="mb10">
        物流服务商：
        <el-select v-model="serviceType" placeholder="请选择物流服务商" size="small">
          <el-option v-for="(item,index) in dict.type.shipments_solution_type" :key="index" :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
        <span class="ml20" v-if="serviceType == 'OTHER'">
          物流方案：
          <el-input type="text" size="small" v-model="warehouseCarrierService" style="width: 200px"
                    placeholder="请输入物流方案"></el-input>
        </span>
      </div>
      <el-form :model="skuPackageInfo" :rules="onlineLogisticsRules" ref="onlineLogisticsRef" size="small"
               label-width="120px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="包裹长度(cm)" prop="goods_length">
              <el-input v-model="skuPackageInfo.goods_length" type="number" placeholder="请输入商品长度"
                        clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="包裹宽度(cm)" prop="goods_width">
              <el-input v-model="skuPackageInfo.goods_width" type="number" placeholder="请输入商品宽度（单位：cm）"
                        clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="包裹高度(cm)" prop="goods_height">
              <el-input v-model="skuPackageInfo.goods_height" type="number" placeholder="请输入商品高度（单位：cm）"
                        clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="包裹重量(kg)" prop="goods_weight">
              <el-input v-model="skuPackageInfo.goods_weight" type="number" placeholder="请输入商品重量（单位：kg）"
                        clearable/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="edit-box">
        <el-table :data="onlineLogisticsInfo" align="center" style="width: 100%" border>
          <el-table-column prop="order_id" label="子订单号" align="center"></el-table-column>
          <el-table-column prop="sku_code" label="商品规格Code" align="center"></el-table-column>
          <el-table-column prop="goods_length" label="长（单位：cm）" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.goods_length"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="goods_width" label="宽（单位：cm）" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.goods_width"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="goods_height" label="高（单位：cm）" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.goods_height"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="goods_weight" label="重量（单位：kg）" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.goods_weight"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="edit-box" v-if="logisticsList && logisticsList.length>0">
        <el-table :data="logisticsList" align="center" style="width: 100%" border :row-class-name="tableRowClassName">
          <el-table-column prop="logisticsServiceName" label="运输方式名称" align="center"
                           width="250"></el-table-column>
          <el-table-column prop="transportTime" label="参考运输时效" align="center" width="200"></el-table-column>
          <el-table-column prop="freight" label="预估运费" align="center" width="200"></el-table-column>
          <el-table-column prop="warehouseName" align="center" label="仓库名称" width="200"></el-table-column>
          <el-table-column prop="warehouseContacts" align="center" label="收件人" width="200"
                           v-if="!isSendOutGoods"></el-table-column>
          <el-table-column prop="warehouseAddress" align="center" label="交货地址" min-width="300"></el-table-column>
          <el-table-column align="center" label="操作" v-if="isSendOutGoods && !isCaiNiao " width="150">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="onlineShipment(scope.row)">选择此方案发货</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeOnlineLogistics()">取 消</el-button>
        <el-button v-if="!isSendOutGoods" size="small" type="primary" @click="getTrialList">
          试算
        </el-button>
        <el-button v-if="isSendOutGoods && serviceType == 'OTHER' " size="small" type="primary"
                   @click="comfirmShipping">
          确认发货
        </el-button>
        <el-button v-if="isSendOutGoods && serviceType != 'OTHER'" size="small" type="primary"
                   @click="getLogisticsPlan">
          获取线上物流方案
        </el-button>
      </div>
    </el-dialog>
    <!--  物流方案  -->
    <ReportInfo v-if="isOpenLogisticsModal" :logisticsInfo="logisticsInfo" :programmeForm="programmeForm"
                @reportInfoSwitch="reportInfoSwitch"></ReportInfo>

  </div>
</template>
<script>
import {
  getAeOrderSkuPackageInfo, declareProductInfo, logisticsServiceQuery, createOtherWarehouseOrder, queryLogisticsPlan
} from "@/api/order/purchaser"
import ReportInfo from "@/views/purchase/components/ReportInfo.vue";

export default {
  name: 'order-list',
  dicts: ['shipments_solution_type', 'erp_product_template'],
  components: {
    ReportInfo
  },
  props: {
    //线上发货物流信息
    logisticsInfo: {},
    //是否打开线上发货物流信息
    isOpenFreightTrial: {
      type: Boolean,
      default: false,
    },
    orderId: {
      type: String / Number,
      default: ""
    },
    // 是否是去发货
    isSendOutGoods: {
      type: Boolean,
      default: false,
    },
    // 是否是查看菜鸟物流
    isCaiNiao: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      isOpenLogisticsModal: false,
      programmeForm: [],
      isEditOrderSku: this.isOpenFreightTrial,
      onlineLogisticsInfo: {},//线上发货物流信息
      skuPackageInfo: "",//大包规格信息
      goodsType: "0",//货物类型
      buttonLoading: false,
      proButtonLoading: false,//提交物流方案信息按钮loading
      onlineLogisticsRules: { // 线上发货表单校验
        goods_width: [{required: true, message: '商品宽度不能为空', trigger: 'blur'}],
        goods_length: [{required: true, message: '商品长度不能为空', trigger: 'blur'}],
        goods_height: [{required: true, message: '商品高度不能为空', trigger: 'blur'}],
        goods_weight: [{required: true, message: '商品重量不能为空', trigger: 'blur'}],
      },
      orderList: [],//订单列表
      dialogTitle: '订单详情',//弹出框标题
      isShowOrderDetail: false, //是否展示订单详情弹出框
      isOpenOrderDetail: false,
      title: '订单详情',
      orderDetailForm: '',//订单详情
      isShowOnlineLogistics: false,// 是否打开线上物流方案选择弹窗
      logisticsList: [],//物流方案
      warehouseCarrierService: "",// 手填燕文物流方案
      serviceType: "CAINIAO",
    }
  },
  mounted() {
    this.getOrderSkuPackageInfo()
  },
  methods: {
    // 自定义表格样式
    tableRowClassName({row, rowIndex}) {
      if (row.logisticsServiceCode == this.logisticsInfo.logisticsServiceCode) {
        return 'warning-row';
      }
    },
    // 申报信息的控制开关
    reportInfoSwitch(e) {
      this.isOpenLogisticsModal = e
      this.closeOnlineLogistics('1')
    },
    // 获取商品长宽高重量
    getOrderSkuPackageInfo() {
      getAeOrderSkuPackageInfo({orderId: this.logisticsInfo.orderId}).then(response => {
        this.isEditOrderSku = true
        this.onlineLogisticsInfo = response.data.skuPackageInfoList
        this.skuPackageInfo = response.data.skuPackageInfo
        this.goodsType = response.data.type
        if (!this.isSendOutGoods) {
          this.getTrialList()
        }
      })
    },
    // 获取线上物流方案
    getLogisticsPlan() {
      if (!this.serviceType) {
        this.$message.error('请选择物流服务商')
        return
      }
      let data = {
        skuPackageInfoList: JSON.stringify(this.onlineLogisticsInfo),
        skuPackageInfo: this.skuPackageInfo,
        sellerLoginId: this.logisticsInfo.sellerLoginId,
        serviceType: this.serviceType
      }
      queryLogisticsPlan(data).then(response => {
        this.$message.success(response.msg)
        let list = response.data
        this.logisticsList = [];
        for (let i = 0; i < list.length; i++) {
          this.logisticsList.push({
            freight: list[i].trialResult,
            logisticsServiceCode: list[i].logisticsServiceId,
            logisticsServiceName: list[i].logisticsServiceName,
            transportTime: list[i].logisticsTimeliness,
            warehouseAddress: list[i].deliveryAddress,
            warehouseName: list[i].warehouseName,
          })
        }
      })
    },
    // 获取试算物流方案
    getTrialList() {
      let data = {
        "country": this.logisticsInfo.country,
        "length": this.skuPackageInfo.goods_length,
        "width": this.skuPackageInfo.goods_width,
        "height": this.skuPackageInfo.goods_height,
        "weight": this.skuPackageInfo.goods_weight,
        "type": this.goodsType,
        "zipCode": this.logisticsInfo.zipCode
      }
      logisticsServiceQuery(data).then(response => {
        this.logisticsList = response.data
      })
    },
    // 确认其他物流发货
    comfirmShipping() {
      this.$confirm("是否确定选择其他物流发货？", '提示').then(() => {
        const params = {
          orderId: this.logisticsInfo.orderId,
          warehouseCarrierService: this.warehouseCarrierService
        }
        createOtherWarehouseOrder(params).then(res => {
          this.$message.success(res.msg);
          this.proButtonLoading = false;
          this.closeOnlineLogistics('1')
        })
      })
    },
    // 选择物流方案进行线上发货
    onlineShipment(row) {
      console.log('row', row)
      this.$confirm("是否确定选择此物流方案", '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.logisticsInfo.logisticsServiceId = row.logisticsServiceCode;
        this.logisticsInfo.serviceType = this.serviceType
        declareProductInfo({orderId: this.logisticsInfo.orderId}).then(res => {
          this.programmeForm = res.data;
          if (this.serviceType = "CAINIAO") {
            this.isOpenLogisticsModal = true
          } else {
            this.isOpenLogisticsModal = false
          }
        })
      })
    },
    // 关闭线上发货弹窗
    closeOnlineLogistics(e) {
      this.isEditOrderSku = false
      this.$emit('logisticsSwitch', e)
    },
  }
}
</script>
<style scoped>
.el-divider__text {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}

.el-table .warning-row {
  background: #ff0000;
}
</style>
